<template>
    <n-grid :cols="1">

        <!-- 设置音乐列表文字的颜色 -->
        <n-gi class="audio-list-font-color">

            <div class="audio-list-font-color-title" style="font-size: 1.1rem;margin-bottom: 10px;">
                <n-icon size="25px" :component="AirplaneTakeOff24Regular" />
                -- 颜色渐变设置：
            </div>

            <div class="audio-list-font-color-introduce">音乐列表文字颜色渐变范围：</div>

            <div class="audio-list-font-color-set" style="margin-bottom: 8px;">

                <n-color-picker v-model:value="useSystemConfig.musicListFontColorStrat" placement="right" :on-update:value="updateMusicListFontColorStrat" :show-preview="true" style="width: 150px;" />
                <div style="width: 100px;text-align: center;">至</div>
                <n-color-picker v-model:value="useSystemConfig.musicListFontColorMiddle" :on-update:value="updateMusicListFontColorMiddle" :show-preview="true" style="width: 150px;" />
                <div style="width: 100px;text-align: center;">至</div>
                <n-color-picker v-model:value="useSystemConfig.musicListFontColorEnd" :on-update:value="updateMusicListFontColorEnd" :show-preview="true" style="width: 150px;" />

            </div>

            <div class="audio-list-font-color-introduce">音乐列表文字颜色渐变距离：</div>

            <div class="audio-list-font-color-set" style="height: 30px;margin-bottom: 8px;">

                <n-slider v-model:value="useSystemConfig.musicListFontColorDeg" :step="1" :max="500" style="width: 250px;" :on-update:value="updateMusicListFontColorDeg" />

            </div>

            <div class="audio-list-font-color-preview">
                <n-gradient-text style="font-size: 1.5rem;"
                    :gradient="`linear-gradient(${useSystemConfig.musicListFontColorDeg}deg, ${useSystemConfig.musicListFontColorStrat} 0%, ${useSystemConfig.musicListFontColorMiddle} 50%, ${useSystemConfig.musicListFontColorEnd} 100%)`">
                    预览：一点寒芒先到，随后枪出如龙。
                </n-gradient-text>
            </div>

        </n-gi>

        <!-- 是否开启服务器服务 -->
        <n-gi class="audio-server-open-or-close">

            <div class="audio-server-open-or-close-title" style="font-size: 1.1rem;margin-bottom: 10px;">
                <n-icon size="25px" :component="AirplaneTakeOff24Regular" />
                -- 定时暂停/关闭：
            </div>

            <n-space class="audio-server-open-or-close-content">

                <div class="audio-server-open-or-close-pick">

                    <n-time-picker v-show="showTimePick" v-model:value="timePick" input-readonly time-zone="UTC" :actions="['confirm']" @confirm="handleTimePickConfirm" />

                    <span v-if="countPause" style="font-variant-numeric: tabular-nums">
                        开启暂停倒计时：
                        <n-countdown :duration="useSystemConfig.countPause" :active="countPause" />
                    </span>

                    <span v-if="countDown" style="font-variant-numeric: tabular-nums">
                        开启关闭倒计时：
                        <n-countdown :duration="useSystemConfig.countDown" :active="countDown" />
                    </span>

                </div>

                <div class="audio-server-open-or-close-switch">
                    <div style="margin-bottom: 5px;">
                        <n-switch v-model:value="countPause" :disabled="countDown" @update:value="countPauseEvent">
                            <template #icon>
                                <n-icon :component="ClockPause24Regular" />
                            </template>
                        </n-switch>
                    </div>
                    <div>
                        <n-switch v-model:value="countDown" :disabled="countPause" @update:value="countDownEvent">
                            <template #icon>
                                <n-icon :component="PoweroffOutlined" />
                            </template>
                        </n-switch>
                    </div>
                </div>

            </n-space>

        </n-gi>

    </n-grid>
</template>
    
<script setup lang='ts'>
import { ref, computed, getCurrentInstance } from 'vue'
import { useSystemConfigStore } from '../../store/index'
import { AirplaneTakeOff24Regular, ClockPause24Regular } from '@vicons/fluent'
import { PoweroffOutlined } from '@vicons/antd'

const useSystemConfig = useSystemConfigStore()
const instance = getCurrentInstance()
const timePick = ref(900000)
const countPause = computed(() => { // 是否开启暂停计时
    return useSystemConfig.countPause !== 0
})
const countDown = computed(() => { // 是否开启关机计时
    return useSystemConfig.countDown !== 0
})
const showTimePick = computed(() => { // 是否展示时间选择组件
    return !(countPause.value || countDown.value)
})


// 调节音乐列表文字渐变颜色设置
const updateMusicListFontColorStrat = (value: string) => {
    useSystemConfig.changeMusicListFontColorStrat(value)
}
const updateMusicListFontColorMiddle = (value: string) => {
    useSystemConfig.changeMusicListFontColorMiddle(value)
}
const updateMusicListFontColorEnd = (value: string) => {
    useSystemConfig.changeMusicListFontColorEnd(value)
}
const updateMusicListFontColorDeg = (value: number) => {
    useSystemConfig.changeMusicListFontColorDeg(value)
}

// 处理时间确认
const handleTimePickConfirm = (value: number) => {
    timePick.value = value
}
const countPauseEvent = (value: boolean) => { // 开启暂停倒计时
    if (value) { // 开启倒计时
        useSystemConfig.changeCountPause(timePick.value)
        instance?.proxy?.$Bus.emit('countPause', { time: timePick.value })
    } else {
        useSystemConfig.changeCountPause(0)
        instance?.proxy?.$Bus.emit('countPauseCancel')
    }
}
const countDownEvent = (value: boolean) => { // 开启关闭倒计时
    if (value) { // 开启倒计时 
        useSystemConfig.changeCountDown(timePick.value)
        instance?.proxy?.$Bus.emit('countDown', { time: timePick.value })
    } else {
        useSystemConfig.changeCountDown(0)
        instance?.proxy?.$Bus.emit('countDownCancel')
    }
}

</script>
    
<style lang="less" scoped>
.audio-list-font-color {
    margin-bottom: 20px;

    .audio-list-font-color-set {
        border: 1px dashed;
        display: flex;
        align-items: center;
    }
}

.audio-server-open-or-close {

    .audio-server-open-or-close-content {
        height: 80px;
        display: flex;
        align-items: center;

        .audio-server-open-or-close-pick {
            display: flex;
            align-items: center;
        }

    }
}
</style>